Formating HTML

Tutorial HTML; Diperbarui tanggal: 9/09/2025

Formatting dalam HTML (Hypertext Markup Language) adalah proses memberikan tampilan visual atau format pada halaman web dengan menggunakan elemen HTML dan CSS (Cascading Style Sheets). Formatting dapat digunakan untuk membuat halaman web lebih menarik dan mudah dibaca oleh pengguna.

Contoh formatting yang dapat dilakukan pada halaman web menggunakan elemen HTML:

Ini adalah tulisan dengan cetak tebal

Ini adalah tulisan dengan cetak miring

Ini adalah teks subscript dan superscript

Elemen-elemen dalam Pemformatan HTML

Berikut adalah elemen-elemen HTML yang sering digunakan dalam memformat dokumen HTML:

  • <b> - Teks tebal
  • <strong> - Teks penting
  • <i> - Teks miring
  • <em> - Teks yang ditekankan
  • <mark> - Teks yang ditandai
  • <small> - Teks lebih kecil
  • <del> - Teks yang dihapus
  • <ins> - Teks yang disisipkan
  • <sub> - Teks subskrip
  • <sup> - Teks superskrip

Berikut adalah contoh penggunaan elemen-elemen HTML diatas

Penggunaan Elemen <b> dan <strong>

Tag <b> dan <strong> digunakan untuk membuat tulisan tebal. Berikut adalah contoh penggunaanya.

<b>Ini adalah kalimat yang di cetak tebal.</b>
<strong>Ini adalah kalimat penting.</strong>

Kode diatas akan menghasilkan tampilan berikut:

Ini adalah kalimat yang di cetak tebal.
Ini adalah kalimat penting.

Secara default element <b> dan <strong> akan dicetak tebal. Perbedaan dalam penggunaanya adalah elemen <strong> pada umumnya digunakan untuk menekankan bahwa element tersebut merupakan hal yang penting dan perlu mendapatkan perhatian dari pembaca atau mesin pencari dalam kaitan dengan SEO engine.

Penggunaan Elemen <i> dan <em>

Tag <i> dan <em> digunakan untuk membuat tulisan tebal. Berikut adalah contoh penggunaanya.

<i>Ini adalah kalimat yang di cetak miring.</i>
<em>Ini adalah kalimat yang perlu mendapatkan penekanan.</em>

Kode diatas akan ditampilkan sebagai berikut:

Ini adalah kalimat yang di cetak miring.
Ini adalah kalimat yang perlu mendapatkan penekanan.

Secara default tag <i> dan <em> akan dicetak sama yaitu miring. Perbedaan dalam penggunaanya adalah tag <i> sering digunakan untuk menunjukkan bahasa lain, sedangkan tag <em> digunakan untuk memberikan penekanan seperti simbol, dll.

Elemen <small> HTML

Elemen <small> digunakan untuk menampilkan tulisan yang lebih kecil

<p>Tulisan dengan ukuran normal</p>
<small>Ini adalah tulisan dengan huruf kecil.</small>

Kode diatas akan menghasilkan tampilan sebagai berikut:

Tulisan dengan ukuran normal

Ini adalah tulisan dengan huruf kecil.

Elemen <mark> HTML

Elemen <mark> mendefinisikan teks yang harus di sorot/ditandai.

<p>Jangan lupa untuk <mark>belajar yang giat </mark> hari ini ya.</p>

Kode diatas akan menghasilkan tampilan seperti berikut:

Jangan lupa untuk belajar yang giat hari ini ya.

Elemen <del> HTML

Elemen <del> digunakan untuk menunjukkan teks yang dihapus. ELemen pada tag <del> akan ditandai dengan teks yang dicoret.

<p>Makanan favorite saya adalah <del>tahu goreng</del> pisang goreng.</p>

Makanan favorit saya adalah tahu goreng pisang goreng.

Elemen <ins> HTML

Elemen HTML <ins> digunakan untuk menandai teks atau konten yang ditambahkan baru atau diinsert ke dalam halaman web. Dalam tampilan web, teks yang ditandai dengan elemen <ins> akan ditampilkan dengan garis bawah atau underline.

Contoh penggunaan elemen <ins>:

<p>Sebuah paragraf yang mengandung <ins>teks yang baru ditambahkan</ins> pada halaman web.</p>

Kode diatas akan menghasilkan tampilan berikut:

Sebuah paragraf yang mengandung teks yang baru ditambahkan pada halaman web.

Elemen <sub> dan <sup> HTML

Elemen HTML <sub> digunakan untuk menampilkan teks atau konten sebagai subscript, yaitu teks yang diletakkan di bawah garis baseline teks normal, sedangkan elemen HTML <sup> digunakan untuk menampilkan teks atau konten sebagai superscript, yaitu teks yang diletakkan di atas garis baseline teks normal. Subscript  dan supscript sering digunakan untuk menunjukkan angka atau simbol kimia, notasi matematika, atau catatan kaki pada halaman web.

Contoh penggunaan elemen <sub>:

<p>H<sub>2</sub>O adalah rumus kimia untuk air dan ketika <p>H<sub>2</sub>O terurai maka akan menghasilkan ion H<sup>+</sup></p>

Kode diatas akan menghasilkan tampilan

H2O terurai maka akan menghasilkan ion H+